<style lang="less" scoped>
.detailpassword{
    width: 40vw;
    margin-left: 30vw;
    margin-top: 10vw;
    .mobile_code{
        width:30vw;
    }
    .btverification{
        width: 9vw;
    }
}
</style>
<template>
  <div class="xl">
    <MainUser></MainUser>
    <div style="height:3.2vw"></div>
    <affix style="margin-top:-3.2vw">
      <MainTitle ref="maintitle"></MainTitle>
    </affix>
    <el-form :model="detailpassworddata" ref="detailpasswordFrom" class="detailpassword" :rules="rules">
        <el-form-item
                label="手机号码"
                prop="mobile"
            >
            <el-input   placeholder="手机号码"  v-model="detailpassworddata.mobile"></el-input>
        </el-form-item>
        <el-form-item
                label="验证码"
                prop="mobile_code"
            >
            <div style="width:40vw">
                <div>.</div>
                <el-input class="mobile_code"  placeholder="验证码"  v-model="detailpassworddata.mobile_code"></el-input>
                <el-button v-if="is_mobile_code" class="btverification" @click="btverification">获取短信验证码</el-button>
                <el-button v-if="!is_mobile_code" class="btverification">{{mobile_code_time}}秒</el-button>
            </div>
            
        </el-form-item> 
        
        <el-form-item
                label="新密码"
                prop="password"
            >
            <el-input   placeholder="新密码"  v-model="detailpassworddata.password"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button class="btzhuce" type="primary" round @click="btdetailpassword">修改密码</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { detailpassword,captchaSms } from '@/request/api';
import MainTitle from '../main_title'
import MainUser from '../main_user'
export default {
    data() {
        return {
            detailpassworddata:{
                mobile:'',
                mobile_code:'',
                password:'',
            },
            rules: {
                mobile: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                ],
                mobile_code: [
                    { required: true, message: '请输入手机验证码', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入新密码', trigger: 'blur' }
                ],
            },
            mobile_code_time:0,
            is_mobile_code:true,
            timebiao:'',
        }
    },
    mounted() {
      this.$refs.maintitle.setissousuo(false);
    },
    methods: {
        btdetailpassword(){
            this.$refs['detailpasswordFrom'].validate((valid) => {
                if (valid) {
                    detailpassword(this.detailpassworddata).then(res => {
                        if(res.ok){
                            this.$message({
                                message: '密码修改成功',
                                type: 'success'
                            });
                        }
                    })
                }
            });
        },
        btverification(){
            if(this.detailpassworddata.mobile == ""){
                this.$confirm('请填写手机号')
                .then(_ => {
                done();
                })
                .catch(_ => {});
            }else{
                captchaSms({
                    scene:"password_reset",
                    mobile:this.detailpassworddata.mobile
                }).then(res => {
                    if(res.ok){
                        this.mobile_code_time = 60;
                        this.is_mobile_code = false;
                    }
                })
            }
        },
        timer() {
            window.clearTimeout(this.timebiao);
            if(this.mobile_code_time <= 0){
                this.is_mobile_code = true;
            }else{
                this.timebiao = setTimeout(()=>{
                    this.mobile_code_time = this.mobile_code_time - 1;
                },1000)
            }
        },
    },
    components: {
        MainTitle,
        MainUser
    },
    watch: {
      mobile_code_time() {
        this.timer();
      },
    },
}
</script>
